/* Navbar */
    .navbar {
      transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
      background: transparent !important;
      position: absolute;
      width: 100%;
      z-index: 10;
       padding: 1.5rem 0;
    }
    .navbar-brand {
  position: relative;
}

.logo {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: opacity 0.3s ease;
 
}
.bold-text {
  font-weight: 800;
  transition: font-weight 0.6s ease;
}

.logo-top {
  opacity: 1;
}

.logo-scroll {
  opacity: 0;
}

.navbar.scrolled .logo-top {
  opacity: 0;
}

.navbar.scrolled .logo-scroll {
  opacity: 1;
}
/* Navbar */
.navbar {
  position: fixed;
  width: 100%;
  z-index: 1000; /* High z-index so toggler is clickable */
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
  background: transparent;
}

/* Logo container */
.navbar-brand {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 10; /* Make sure logos are above navbar background but below toggler */
}

/* Logos stacked */
.logo {
  max-height: 80px;
  width: auto;
  transition: opacity 0.4s ease;
  pointer-events: none; /* Allow clicks to pass through */
}

/* Opacity swap on scroll */
.logo-top { opacity: 1; }
.logo-scroll { opacity: 0; }

.navbar.scrolled .logo-top { opacity: 0; }
.navbar.scrolled .logo-scroll { opacity: 1; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .logo { max-height: 50px; }
}

    .navbar.scrolled {
      position: fixed;
      background: #fff !important;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .navbar .nav-link { color: white; transition: color 0.3s; }
    .navbar.scrolled .nav-link { color: black !important; }
    .navbar-brand img { height: 80px; }
    .navbar-toggler-icon { filter: invert(1); }
    .navbar.scrolled .navbar-toggler-icon { filter: invert(0); }

  /* Hero Section */
/* Background Video */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;

  flex-direction: column;
 justify-content: space-between; /* logos at top, text at bottom */
  padding: 20px;
  color: white;
}
    .hero-image {
      position: absolute;
      inset: 0;
    background: url(BG1.jpg) center/cover no-repeat; 
      z-index: 1;
      transition: opacity 1s ease;
    }

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fill hero area */
  transform: translate(-50%, -50%);
  z-index: -2; /* Behind overlay and content */
  transition: opacity 1s ease-in-out;
}

/* Keep your dark overlay intact */
.hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.45); /* optional: adjust darkness */
  z-index: -1;
}


.hero-text {
  position: relative;
  z-index: 1;
  text-align: center;
 bottom: 5px;
 
}


    .hero::after {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.45);
      z-index: 0;
    }

       /* Logos Arrangement */
  /* Hero Logos at the top */
.hero-logos {
  display: flex;
  justify-content: space-between; /* left, center, right */
  align-items: center;
  padding-left:80px ;
  padding-right: 100px;
 /* gap: 80px;  /* spacing between logos */
flex-wrap: nowrap;
  margin-bottom: 20px;
  margin-top: 60px;
  z-index: 1;
}
    .hero-logos img {
      max-height: 80px;
      transform: rotate(-15deg);
      max-width: clamp(80px, 12vw, 150px); /* scale between 80px and 150px */
      opacity: 10;
      animation: fadeZoomIn 1s forwards;
      
    }
    .hero-logos img.left { transform: rotate(-15deg); max-height:90px;}
    .hero-logos img.center { transform: rotate(0deg); max-height: 120px;}
    .hero-logos img.right { transform: rotate(15deg); max-height: 120px;}

    @keyframes fadeZoomIn {
      to { opacity: 1; transform: rotate(0deg) scale(1); }
    }

    /* Hero Text */
    .hero-text h1 {
  font-size: 2rem;      /* reduced size */
    margin-top: 80px;
  text-align: left;   /* keep aligned */
  font-weight: 500;     /* bold but clean */
  color: #fefefe;
  padding-left: 20x;
}
   
    .hero-text p {
      font-size: 1rem;
      max-width: 900px;
    /*  margin: 0 auto 20px auto;*/
      text-align: left;
       padding-left: 20;
      font-weight: 400;
    }

.descriptions .desc {
  flex: 1 1 300px;
  margin: 15px;
  text-align: left; /* keep text left-aligned */
  color: white;
  position: relative;
  padding-left: 0px;
}
.more-text{
    padding-left: 12px;
}

.descriptions .desc .yellow-line {
  width: 320px;          /* smaller, fits the text block */
  height: 3px;
  background-color: #FFD700;
  margin-bottom: 10px;  /* space below the line */
  border-radius: 2px;
}

.yellow{ color: #FFD700;
    font-size: larger;
    font-weight: 400;

}
    /* Three Descriptions */
    .descriptions {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      text-align: justify;
      padding-left: 0px;
    }
    .descriptions .desc {
      flex: 1 1 300px;
      margin: 15px;
      text-align: left;
      color: white;
    }

    /* Dropdown menu styling */
    .dropdown-menu a { color: black; 
   
    }
    .dropdown-menu a:hover { background-color: #f8f9fa; }
       /* Dropdown hover animation */
    .dropdown-menu {
      display: none;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.3s ease;
      border-radius: 10px;
    }
    .nav-item:hover .dropdown-menu {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }
     /* ---------- NEWS SECTION ---------- */
    .news-section {
      padding: 80px 20px;
      background: #f8f8f8;
      text-align: center;
    }

    .news-section h2 {
      font-size: 2rem;
      margin-bottom: 30px;
      color: #003366;
    }

    .news-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 25px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .news-card {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
      width: 320px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .news-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }

    .news-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .news-content {
      padding: 20px;
      text-align: left;
    }

    .news-content h3 {
      color: #003366;
      margin-bottom: 10px;
      font-size: 1.1rem;
    }

    .news-content p {
      font-size: 0.95rem;
      color: #444;
      line-height: 1.5;
    }

    /* ---------- PARTNERS SECTION ---------- */
.partners {
  padding: 60px 20px;
  text-align: center;
  background: #fff;
  overflow: hidden;
  position: relative;
}

.partners h2 {
  color: #003366;
  margin-bottom: 30px;
}

.partners-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.partners-track {
  display: flex;
  gap: 60px;
  animation: scroll 25s linear infinite;
  width: max-content;
}

.partner-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
}

.partner-item img {
  height: 60px;
  object-fit: contain;
  opacity: 0.85;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.partner-item p {
  font-size: 0.9rem;
  margin-top: 8px;
  color: #003366;
  font-weight: 500;
}

.partner-item:hover img {
  transform: scale(1.1);
  opacity: 1;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .partners-track {
    gap: 35px;
    animation-duration: 35s;
  }

  .partner-item img {
    height: 50px;
  }

  .partner-item p {
    font-size: 0.8rem;
  }
}


    .logo {
  height: 50px;
  transition: opacity 0.3s ease;
  padding-left: 20px;
}


/* RESPONSIVE FIXES */
@media (max-width: 768px) {
  .hero {
    justify-content: flex-start; /* stack from top */
    padding-top: 120px; /* spacing below navbar */
  }

  .hero-logos {
    flex-direction: row;
    gap: 10px;
    margin-bottom: 30px;
  }

  .hero-logos img {
    max-height: 50px;
  }

  .hero-text h1 {
    font-size: 1.4rem;
  }

  .hero-text p {
    font-size: 0.95rem;
  }
      .hero-logos img.left {  max-height: 70px}
    .hero-logos img.center {  max-height: 90px;}
    .hero-logos img.right { max-height: 95px;}

}
  footer {
      background:  #44B64A; }
      /* Scrollbar styling for Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;               /* scrollbar width */
}

::-webkit-scrollbar-track {
  background:  #44B64A ;        /* background of the scrollbar track */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background:  #44B64A ;         /* scrollbar color */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #44B64A ;          /* color when hovered */
}

/* Scrollbar styling for Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color:  #44B64A ;   /* thumb color | track color */
}
footer {
  background-color: #44B64A;
  padding: 30px 20px;
  text-align: center;
  color: white;
}

.footer-socials {
  display: flex;
  justify-content: right;
  align-items: right;
  gap: 30px;
  margin-bottom: 15px;
}

.footer-socials a img {
  height: 50px;        /* same size for all logos */
  width: 70px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-socials a img:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-socials a img {
    height: 40px;       /* smaller on mobile */
  }
}
.lang-btn {
  background: #ffffff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-weight: bold;
  color: #0c713d;
  cursor: pointer;
  transition: 0.2s;
}

.lang-btn:hover {
  background: #eaeaea;
}

.lang-selector .dropdown-menu {
  min-width: 120px;
  border-radius: 8px;
  text-align: center;
}
.floating-btn {
  position: fixed;
  bottom: 30px;        /* distance from bottom */
  right: 30px;         /* distance from right */
  background-color: #2EC2DF 
;  /* bootstrap blue or your brand color */
  color: #fff;
  padding: 15px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  z-index: 9999;
}

.floating-btn:hover {
  background-color: #0056b3;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}